import moment from "moment";
import { defaultUserEquipment, levelList } from "./utils";
import { tombstoneOpenTip, userDefaultTombstone } from "./tombstone";
import { formatPlantList } from "./battle";
import { plantTypeList } from "./plant";

let defaultUserLog = {
    plantLog: [], // 植物相关日志
    moneyLog: [], // 购买相关日志
    sunLog: [], // 收获阳光日志
}

const renderGoodsHTML = (goods = [], userData, showAll = false, userLog = defaultUserLog) => {
    let moneyLog = userLog.moneyLog
    let buyLog = moneyLog.filter(i => i.type == 'buy')
    let HTML = `
    
    <html>
    <head>
        <style>
            @font-face {
                font-family: AlibabaPuHuiTi-2-55-Regular;
                src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff2) format('woff2');
            }

            html {
                font-family: 'AlibabaPuHuiTi-2-55-Regular', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
                height: 0;
                max-width: 400px;
                min-width: 280px;
            }
    
            .shop {
                border-radius: 4px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                font-size: 12px;
                font-weight: 500;
                color: #333;
                line-height: 1.5;
                overflow: hidden;
            }

            .title {
                padding: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                font-weight: 400;
                color: #eee;
                background-image: url(https://pic.imgdb.cn/item/66656e745e6d1bfa05aee62b.jpg);
                background-size: 120px 120px;
            }

            .title img {
                height: 30px;
                margin-right: 4px;
                display: block;
            }
    
            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: max-content;
                border-bottom: 1px solid #eee;
                width: 100%;
                padding: 8px 12px;
                box-sizing: border-box;
            }
            
            .list {
    
            }
    
            .lisName {
                padding: 12px;
                font-size: 13px;
                font-weight: 400;
                color: #555;
            }
    
            .name {
                font-size: 13px;
                font-weight: 600;
                color: #000;
            }
    
            .desc {
                font-size: 12px;
                font-weight: 400;
                color: #666;
                word-wrap: break-word;
                white-space: pre-wrap;
            }
    
            .price {
                font-size: 18px;
                font-weight: bolder;
                color: #13a500;
                flex-shrink: 0;
                margin-left: 12px;
                display: flex;
                align-items: center;
            }

            .price img {
                width: 24px;
                height: 24px;
                display: block;
            }
    
            .left {
            }

            .footer {
                padding: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                font-weight: 400;
                color: #eee;
                background-image: url(https://pic.imgdb.cn/item/66656e745e6d1bfa05aee62b.jpg);
                background-size: 120px 120px;
            }
    
            .footer span {
                color: #fff;
                font-size: 20px;
                font-weight: bolder;
            }
    
            .tip {
                padding: 10px;
                font-size: 12px;
                font-weight: 400;
                color: #666;
                box-shadow: 0px 2px 12px 4px rgb(238, 238, 238, 0.5);
            }
    
            .tip span {
                color: #333;
                font-size: 13px;
                margin: 0 2px;
            }

            .footer img {
                width: 24px;
                height: 24px;
                display: block;
                margin: 0 4px;
            }
        </style>
    </head>
    
    <body>
        <div class="shop">
            <div class="title">
                <img src="https://pic.imgdb.cn/item/666566c65e6d1bfa05a70e3b.png" />
                疯狂戴夫的商店
            </div>
            <div class="tip">
                使用指令
                <span>【buy】</span>
                或
                <span>【购买】</span>
                +
                <span>【物品名】</span>
                来购买物品
            </div>
            ${goodsListHtml(goods, showAll, buyLog)}
            <div class="footer">
                当前持有金钱：<img src="https://pic.imgdb.cn/item/66656c3f5e6d1bfa05acaaa1.png" />
                <span>${userData.money}</span>
            </div>
        </div>
    </body>
    
    </html>
    `
    return HTML
}

const goodsListHtml = (goods = [], showAll, buyLog) => {
    let result = ``
    goods.map(list => {
        result += `
            <div class="list">
                <div class="lisName">${list.name}</div>
                ${goodsHtml(list.itemList, showAll, buyLog)}
            </div>
        `
    })
    return result
}

const goodsHtml = (list = [], showAll, buyLog) => {
    let todayBuyLog = buyLog.filter(i => moment(i.time, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD'))
    let result = ``
    list.map(i => {
        let todayBuyTip = ''
        if (i.everyDayLimit) {
            let todayBuyItemLog = todayBuyLog.filter(j => j.buyItemId && j.buyItemId == i.itemId)
            let todayBuyNumber = todayBuyItemLog.length ? todayBuyItemLog.reduce((a, b) => a + Number(b.buyNum), 0) : 0
            todayBuyTip = ` · 今日已购买${todayBuyNumber}次`
        }
        result += `
            <div class="item">
                <div class="left">
                    <div class="name">${i.name}</div>
                    <div class="desc">${i.desc}</div>
                    <div class="desc">${i.isCanRepeatBuy ? ' · 可重复购买 ' : '' }</div>
                    ${showAll ? `<div class="desc"> · ${i.unlockLevel}级解锁</div>` : ''}
                    ${i.everyDayLimit ? `<div class="desc"> · 一天可购买${i.everyDayLimit}次</div>` : ''}
                    ${i.everyDayLimit ? `<div class="desc">${todayBuyTip}</div>` : ''}
                </div>
                <div class="price">
                    ${i.price ? `
                        <img src="https://pic.imgdb.cn/item/666569775e6d1bfa05a9fa63.png" />
                        ${i.price}
                    ` : '免费'}
                </div>
            </div>
        `
    })
    return result
}

const renderItemsHTML = (items = [], userData) => {
    let HTML = `
        <html>
        <head>
            <style>
                @font-face {
                    font-family: AlibabaPuHuiTi-2-55-Regular;
                    src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff2) format('woff2');
                }

                html {
                    font-family: 'AlibabaPuHuiTi-2-55-Regular', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
                    height: 0;
                    max-width: 400px;
                    min-width: 280px;
                }

                .shop {
                    border-radius: 4px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    font-size: 12px;
                    font-weight: 500;
                    color: #333;
                    line-height: 1.5;
                    min-width: 300px;
                    overflow: hidden;
                }

                .title {
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    font-weight: 400;
                    color: #eee;
                    background-image: url(https://pic.imgdb.cn/item/66656e745e6d1bfa05aee62b.jpg);
                    background-size: 120px 120px;
                }

                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: max-content;
                    border-bottom: 1px solid #eee;
                    width: 100%;
                    padding: 8px 12px;
                    box-sizing: border-box;
                    box-shadow: 0 0 20px 2px rgb(238, 238, 238, 0.6);
                }
                

                .name {
                    font-size: 14px;
                    font-weight: 600;
                    color: #000;
                }

                .desc {
                    font-size: 12px;
                    font-weight: 400;
                    color: #555;
                }

                .price {
                    font-size: 14px;
                    font-weight: 400;
                    color: #333;
                    flex-shrink: 0;
                    margin-left: 12px;
                }

                .left {
                    margin-right: 12px;
                }

                .footer {
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: 400;
                }

                .tip {
                    padding: 10px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #999;
                    box-shadow: 0px 2px 12px 4px rgb(238, 238, 238, 0.8);
                }

                .tip span {
                    color: #333;
                    font-size: 13px;
                    margin: 0 2px;
                }
            </style>
        </head>
        
        <body>
            <div class="items">
                <div class="title">
                    我的背包
                </div>
                ${itemHtml(items)}
                <div class="footer tip">
                    发送 [使用] 或 [use] + [物品名] 使用道具
                </div>
            </div>
        </body>
        
        </html>
    `
    return HTML
}

const itemHtml = (items = []) => {
    let result = ``
    items.map(item => {
        result += `
            <div class="item">
                <div class="left">
                    <div class="name">${item.info.name}</div>
                    <div class="desc">${item.info.desc}</div>
                    <div class="desc"> · ${item.info.isCanSell ? '可出售 ' + '回收金额：$' + item.info.price : '不可出售' }</div>
                </div>
                <div class="price">${ 'x' + item.num }</div>
            </div>
        `
    })
    return result
}

const renderEquipmentHTML = (equipments = defaultUserEquipment) => {
    let HTML = `
        <html>
        <head>
            <style>
                @font-face {
                    font-family: AlibabaPuHuiTi-2-55-Regular;
                    src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff2) format('woff2');
                }

                html {
                    font-family: 'AlibabaPuHuiTi-2-55-Regular', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
                    height: 0;
                    max-width: 350px;
                    min-width: 240px;
                }

                .shop {
                    border-radius: 4px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    font-size: 12px;
                    font-weight: 500;
                    color: #333;
                    line-height: 1.5;
                    overflow: hidden;
                }

                .title {
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    font-weight: 400;
                    color: #eee;
                    background-image: url(https://pic.imgdb.cn/item/66656e745e6d1bfa05aee62b.jpg);
                    background-size: 120px 120px;
                }

                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: max-content;
                    border-bottom: 1px solid #eee;
                    width: 100%;
                    padding: 16px;
                    box-sizing: border-box;
                    box-shadow: 0 0 20px 2px rgb(238, 238, 238, 0.6);
                }


                .right {
                    font-size: 12px;
                    font-weight: 200;
                    color: #999;
                    flex-shrink: 0;
                    margin-left: 12px;
                }

                .left {
                    margin-right: 12px;
                    font-size: 13px;
                    font-weight: 600;
                    flex: 1;
                    color: #333;
                }

                .footer {
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: 400;
                }

                .tip {
                    padding: 10px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #999;
                    box-shadow: 0px 2px 12px 4px rgb(238, 238, 238, 0.8);
                }

                .tip span {
                    color: #333;
                    font-size: 12px;
                    margin: 0 2px;
                }
            </style>
        </head>
        
        <body>
            <div class="items">
                <div class="title">
                    我的装备
                </div>
                <div class="item">
                    <div class="left">铲子</div>
                    <div class="right">${equipments.shovel.itemId ? equipments.shovel.info.name : '未装备铲子'}</div>
                </div>
                <div class="item">
                    <div class="left">阳光储存器</div>
                    <div class="right">${equipments.sunReservoir.itemId ? equipments.sunReservoir.info.name : '未装备阳光储存器'}</div>
                </div>
                <div class="item">
                    <div class="left">植物图鉴</div>
                    <div class="right">${equipments.plantBook.has ? '当前等级： LV' + equipments.plantBook.level : '未拥有，可在商店购买解锁'}</div>
                </div>
                <div class="item">
                    <div class="left">《植物学》</div>
                    <div class="right">${equipments.botany.has ? '当前等级： LV' + equipments.botany.level : '未拥有，可在商店购买解锁'}</div>
                </div>
                <div class="item">
                    <div class="left">水壶</div>
                    <div class="right">当前版本未开放</div>
                </div>
                <div class="item">
                    <div class="left">肥料</div>
                    <div class="right">当前版本未开放</div>
                </div>
                <div class="footer tip">
                    发送 [装备] + [物品名] 装备道具，可在背包查看持有装备。
                </div>
            </div>
        </body>
        
        </html>
    `
    return HTML
}

const renderUserLevelHTML = (userData) => {
    let levelIndex = userData.level - 1
    let needExp = levelList[levelIndex].exp - userData.exp
    let HTML = `
        <html>
        <head>
            <style>
                @font-face {
                    font-family: AlibabaPuHuiTi-2-55-Regular;
                    src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff2) format('woff2');
                }

                html {
                    font-family: 'AlibabaPuHuiTi-2-55-Regular', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
                }

                body {
                    width: max-content;
                    height: max-content;
                }

                .card {
                    background-image: url(https://pic.imgdb.cn/item/66656e745e6d1bfa05aee62b.jpg);
                    background-size: 120px 120px;
                    padding: 24px 12px 12px 12px;
                }

                .header {
                    display: flex;
                    align-items: flex-end;
                }

                .name {
                    font-size: 24px;
                    font-weight: bold;
                    color: #eee;
                }

                .level {
                    font-size: 18px;
                    color: #fff;
                    margin-left: 8px;
                }

                .tip {
                    color: #fff;
                    font-size: 12px;
                    margin: 4px 0 10px 0;
                }

            </style>
        </head>
        
        <body>
            <div class="card">
                <div class="header">
                    <div class="name">当前花园等级</div>
                    <div class="level">LV${userData.level}</div>
                </div>

                <div class="tip">
                    距离下一等级还需 ${needExp} 经验值
                </div>

                <div class="tip">
                    Tip：完成花园任务或抵御僵尸入侵提升花园等级，解锁更多功能。
                </div>

            </div>
        </body>
        
        </html>
    `
    return HTML
}

const renderUserLogHTML = (userLog, type) => {
    if (type == 'all') {
    }
    else {
        let targetLog = userLog[type]
        let HTML = `
            <html>
            <head>
                <style>
                    @font-face {
                        font-family: AlibabaPuHuiTi-2-55-Regular;
                        src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff2) format('woff2');
                    }
    
                    html {
                        font-family: 'AlibabaPuHuiTi-2-55-Regular', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
                    }
    
                    body {
                        width: max-content;
                        height: max-content;
                        background-image: url(https://pic.imgdb.cn/item/66656e745e6d1bfa05aee62b.jpg);
                        background-size: 120px 120px;
                    }
    
                    .list {
                        padding: 12px;
                        max-width: 600px;
                        min-width: 400px;
                    }

                    .date {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 16px;
                        color: #aaa;
                        border-bottom: 1px solid #eee;
                        padding-bottom: 5px;
                        margin-bottom: 10px;
                    }

                    .time {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 20px;
                        color: #eaeaea;
                    }
    
                    .item {
                        width: 100%;
                        height: max-content;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 24px;
                        font-weight: 400;
                        margin-bottom: 4px;
                        border-bottom: 1px solid #efefef;
                        padding-bottom: 4px;
                    }
    
                    .desc {
                        color: #eee;
                        flex-shrink: 0;
                    }
    
                    .num {
                        color: #fff;
                        margin-left: 16px;
                    }
    
                    .tip {
                        color: #aaa;
                        font-size: 16px;
                        margin-top: 24px;
                        text-align: center;
                    }
                    
                </style>
            </head>
            
            <body>
                <div class="list">
                    ${formatDateLogItemHtml(targetLog, type)}
    
                    <div class="tip">
                        默认展示20条，更多请在后方添加查询数量
                    </div>
    
                </div>
            </body>
            
            </html>
        `
        return HTML
    }
}

const formatDateLogItemHtml = (logs = [], type) => {
    // 按天分组
    let res = logs.reduce((result, item) => {
        const date = item.time.split(' ')[0]
        if (!result[date]) {
            result[date] = []
        }
        result[date].push(item)
        return result
    }, {})
    let result = ``
    for (const date in res) {
        if (Object.hasOwnProperty.call(res, date)) {
            const list = res[date];
            let total = list.reduce((pre, cur) => {
                return pre + Number(cur.num || 0)
            }, 0)
            total = Number(total).toFixed(2)
            let Html = `
                <div class="date">
                    <div>${date}</div>
                    ${type == 'plantLog' ? '' : `<div>收支：${total}</div>`}
                </div>
                ${logItemHtml(list, type)}
            `
            result += Html
        }
    }
    return result
}

const logItemHtml = (logs = [], type) => {
    let result = ``
    logs.map(item => {
        let num = item.num
        // 保留两位小数
        num = Number(item.num).toFixed(2)
        num = num > 0 ? '+' + num : num
        let time = moment(item.time, 'YYYY-MM-DD HH:mm:ss').format('HH:mm:ss')
        let plantInfo = ``
        if (type == 'plantLog') {
            item.addPlant.map(plant => {
                plantInfo += `
                    <div class="item">
                        <div class="desc">${item.desc} ${plant.name}</div>
                        <div class="num">x ${plant.num}</div>
                    </div>
                `
            })
            item.reducePlant.map(plant => {
                plantInfo += `
                    <div class="item">
                        <div class="desc">${item.desc} ${plant.name}</div>
                        <div class="num">x ${plant.num}</div>
                    </div>
                `
            })
        }
        result += `
            <div class="time">
                <div>${time}</div>
                ${type == 'plantLog' ? '' : `<div>当前：${type == 'sunLog' ? item.afterSun : type == 'moneyLog' ? item.afterMoney : ''}</div>`}
            </div>
            ${type == 'plantLog' ? plantInfo : `
                <div class="item">
                    <div class="desc">${item.desc}</div>
                    <div class="num">${num}</div>
                </div>
            `}
        `
    })
    return result
}

const renderRankingHTML = (list = []) => {
    
}

const renderTombstoneHTML = (tombstone = userDefaultTombstone) => {

}

const renderBattleLogHTML = (userBattleLog) => {
    let HTML = `
        <html>
        <head>
            <style>
                @font-face {
                    font-family: AlibabaPuHuiTi-2-55-Regular;
                    src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff2) format('woff2');
                }

                html {
                    font-family: 'AlibabaPuHuiTi-2-55-Regular', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
                }

                body {
                    width: max-content;
                    height: max-content;
                    background-image: url(https://pic.imgdb.cn/item/66656e745e6d1bfa05aee62b.jpg);
                    background-size: 120px 120px;
                }

                .list {
                    padding: 12px;
                    min-width: max-content;
                }

                .date {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 16px;
                    color: #aaa;
                    border-bottom: 1px solid #eee;
                    padding-bottom: 5px;
                    margin-bottom: 10px;
                }

                .time {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 20px;
                    color: #eaeaea;

                }

                .item {
                    width: 100%;
                    font-size: 20px;
                    font-weight: 400;
                    margin-bottom: 4px;
                    border-bottom: 1px solid #efefef;
                    color: #eee;
                    line-height: 20px;
                    padding: 10px 0;
                }

                .item .info {
                    margin-bottom: 10px;
                }

                .num {
                    color: #fff;
                    margin-left: 16px;
                }

                .tip {
                    color: #aaa;
                    font-size: 16px;
                    margin-top: 24px;
                    text-align: center;
                }
                
            </style>
        </head>
        
        <body>
            <div class="list">
                ${formatBattleLogItemHtml(userBattleLog)}

                <div class="tip">
                    默认最近5条记录，更多请在后方添加查询页数
                </div>

            </div>
        </body>
        
        </html>
    `
    return HTML
}

const formatBattleLogItemHtml = (userBattleLog = []) => {
    // 按天分组
    let res = userBattleLog.reduce((result, item) => {
        const date = item.start.split(' ')[0]
        if (!result[date]) {
            result[date] = []
        }
        result[date].push(item)
        return result
    }, {})
    let result = ``
    for (const date in res) {
        if (Object.hasOwnProperty.call(res, date)) {
            const list = res[date];
            let total = list.reduce((pre, cur) => {
                return pre + Number(cur.lostSun)
            }, 0)
            if (total != 0) total = Number(total).toFixed(2)
            let Html = `
                <div class="date">
                    <div>${date}</div>
                    <div>总损失：${total}</div>
                </div>
                ${battleLogItemHtml(list)}
            `
            result += Html
        }
    }
    return result
}

const battleLogItemHtml = (logs = []) => {
    let result = ``
    logs.map(item => {
        let num = item.lostSun
        // 保留两位小数
        if (num != 0) {
            num = Number(num).toFixed(2)
            num = '-' + num
        }
        let time = moment(item.start, 'YYYY-MM-DD HH:mm:ss').format('HH:mm:ss')
        let lostPlant = item.lostPlant.length ? item.lostPlant.reduce((pre, cur, index) => {
            return pre + cur.name + ' x ' + cur.num + (index === item.lostPlant.length - 1 ? '' : '、')
        }, '') : '无'
        // 时长
        let duration = item.battleDuration ? item.battleDuration + '秒' : moment(item.end, 'YYYY-MM-DD HH:mm:ss').diff(moment(item.start, 'YYYY-MM-DD HH:mm:ss'), 'seconds')
        result += `
            <div class="time">
                <div>${time}</div>
                <div>阳光池损失：${num}</div>
            </div>
            <div class="item">
                <div class="info">对局id：${item.index}</div>
                <div class="info">${item.atk.name}袭击了${item.def.name}的花园</div>
                <div class="info">来袭僵尸：${item.atk.info}</div>
                <div class="info">损失植物：${lostPlant}</div>
                <div class="info">对局时长：${duration}</div>
            </div>
        `
    })
    return result
}

const renderBattleConfirmHTML = (defUserPlant = [], zombie = []) => {
    let list = formatPlantList(defUserPlant)
    let HTML = `
        <html>
        <head>
            <style>
            @font-face {
                font-family: AlibabaPuHuiTi-2-55-Regular;
                src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff2) format('woff2');
            }
    
            html {
                font-family: 'AlibabaPuHuiTi-2-55-Regular', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
            }
    
            body {
                width: max-content;
                height: max-content;
                transform: scale(0.8);
            }
    
            .container {
                background-image: url(https://pic.imgdb.cn/item/6672b9d1d9c307b7e9a49847.jpg);
                background-size: 100% 100%;
                width: 1400px;
                height: 600px;
                position: relative;
            }
    
    
            .plantList {
                position: absolute;
                width: 730px;
                left: 252px;
                top: 77px;
                display: flex;
                align-items: center;
            }
    
            .line {
                width: calc(100% / 9);
                height: 492px;
            }
    
            .item {
                width: 100%;
                height: 20%;
                display: flex;
                position: relative;
            }
    
            .plant {
                width: 80%;
                object-fit: cover;
                display: block;
                z-index: 99;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            .chomper {
                top: 40%;
            }

            .nut {
                top: 45%;
            }

            .SunFlower {
                top: 45%;
                left: 45%;
            }

            .cherryBomb {
                top: 60%;
            }

            .shadow {
                width: 100%;
                object-fit: cover;
                display: block;
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                z-index: 2;
            }
    
            .zombieList {
                position: absolute;
                right: 160px;
                top: 77px;
                width: 240px;
                height: 492px;
            }
    
            .zombie {
                max-height: 144px;
                object-fit: cover;
                display: block;
                position: absolute;
            }
    
            .bigZombie {
                max-height: 240px;
            }

            </style>
        </head>
        
        <body>
            <div class="container">
                <div class="plantList">
                    ${renderBattleConfirmPlantHTML(list)}
                </div>
                <div class="zombieList">
                    ${renderBattleConfirmZombieHTML(zombie)}
                </div>
            </div>
        </body>
        
        </html>
    `
    return HTML
}

const renderBattleConfirmPlantHTML = (list = []) => {
    let result = ``
    for (let x = 1; x < 10; x++) {
        const targetLine = list.filter(item => item.x == x)
        const y1 = targetLine.find(item => item.y == 1)
        const y2 = targetLine.find(item => item.y == 2)
        const y3 = targetLine.find(item => item.y == 3)
        const y4 = targetLine.find(item => item.y == 4)
        const y5 = targetLine.find(item => item.y == 5)
        result += `
            <div class="line">
                <div class="item">
                    ${y1 ? `
                        <img class="plant ${y1.img}" src="${y1.url}">
                        <img class="shadow" src="https://pic.imgdb.cn/item/667986d2d9c307b7e9aff183.png">
                    ` : ''}
                </div>
                <div class="item">
                    ${y2 ? `
                        <img class="plant ${y2.img}" src="${y2.url}">
                        <img class="shadow" src="https://pic.imgdb.cn/item/667986d2d9c307b7e9aff183.png">
                    ` : ''}
                </div>
                <div class="item">
                    ${y3 ? `
                        <img class="plant ${y3.img}" src="${y3.url}">
                        <img class="shadow" src="https://pic.imgdb.cn/item/667986d2d9c307b7e9aff183.png">
                    ` : ''}
                </div>
                <div class="item">
                    ${y4 ? `
                        <img class="plant ${y4.img}" src="${y4.url}">
                        <img class="shadow" src="https://pic.imgdb.cn/item/667986d2d9c307b7e9aff183.png">
                    ` : ''}
                </div>
                <div class="item">
                    ${y5 ? `
                        <img class="plant ${y5.img}" src="${y5.url}">
                        <img class="shadow" src="https://pic.imgdb.cn/item/667986d2d9c307b7e9aff183.png">
                    ` : ''}
                </div>
            </div>
        `
    }
    return result
}

const renderBattleConfirmZombieHTML = (zombie = []) => {
    let result = ``
    let list = []
    // 在随机位置生成僵尸
    zombie.map(i => {
        let x = Math.random() * 240
        let y = Math.random() * 320
        let zIndex = Math.floor(y)
        // 检测与其他僵尸是否距离过近
        let isNear = list.some(item => {
            return Math.abs(item.x - x) < 100 && Math.abs(item.y - y) < 100
        })
        let flag = 0
        while (isNear && flag < 100) {
            x = Math.random() * 240
            y = Math.random() * 320
            zIndex = Math.floor(y)
            isNear = list.some(item => {
                return Math.abs(item.x - x) < 100 && Math.abs(item.y - y) < 100
            })
            flag++
        }
        list.push({
            x,
            y,
            zIndex
        })
        result += `
            <img style="left: ${x}px; top: ${y}px;z-index: ${zIndex};" class="zombie" src="${i.url}">
        `
    })
    return result
}

const renderPlantInfoHTML = (plant = {}) => {
    let HTML = `
        <html>
        <head>
            <style>
                @font-face {
                    font-family: AlibabaPuHuiTi-2-55-Regular;
                    src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-2/AlibabaPuHuiTi-2-55-Regular/AlibabaPuHuiTi-2-55-Regular.woff2) format('woff2');
                }
        
                html {
                    font-family: 'AlibabaPuHuiTi-2-55-Regular', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
                }
        
                body {
                    margin: 0;
                    padding: 0;
                    width: max-content;
                    height: max-content;
                }

                .book {
                    border-radius: 4px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    font-size: 12px;
                    font-weight: 500;
                    color: #333;
                    line-height: 1.5;
                    position: relative;
                }
        
                .bg {
                    min-width: 300px;
                    object-fit: cover;
                    z-index: 1;
                }
        
                .plant {
                    position: absolute;
                    left: 61px;
                    top: 20px;
                    width: 192px;
                    height: 146px;
                    z-index: -1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
        
                .plant .grass {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 1;
                }
        
                .plant .img {
                    height: 80%;
                    display: block;
                    object-fit: cover;
                    z-index: 2;
                }
        
                .name {
                    width: 100%;
                    text-align: center;
                    font-size: 18px;
                    font-weight: 600;
                    color: #d09a29;
                    position: absolute;
                    top: 180px;
                    left: 0;
                    letter-spacing: 1px; /* 字间距 */
                }
        
                .info {
                    width: 272px;
                    height: 237px;
                    position: absolute;
                    top: 220px;
                    left: 20px;
                    overflow: hidden;
                    z-index: 2;
                    padding: 10px;
                    box-sizing: border-box;
                    color: #8f431b;
                    font-weight: bold;
                    font-size: 12px;
                    line-height: 16px;
                }
        
                .red {
                    color: #9e0515;
                }
        
                .bottom {
                    position: absolute;
                    bottom: 10px;
                    width: 100%;
                    left: 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 10px;
                    box-sizing: border-box;
                }
        
                .desc {
                    color: #33395d;
                    margin-bottom: 5px;
                    font-size: 14px;
                }
                
            </style>
        </head>
        
        <body>
            <div class="book">
                <img class="bg" src="https://pic.imgdb.cn/item/667e3bd4d9c307b7e906bfc7.png">
                <div class="plant">
                    <img class="grass" src="https://pic.imgdb.cn/item/667e3c21d9c307b7e9076d9e.jpg">
                    <img class="img" src="${plant.url}">
                </div>
                <div class="name">${plant.name}</div>
                <div class="info">

                    <div class="bottom">
                        <div>
                            花费：<span class="red">${plant.price}</span>
                        </div>
                        <div>
                            种植冷却：<span class="red">${plant.cd ? plant.cd + '分钟' : '无'}</span>
                        </div>
                    </div>

                    <div class="desc">${plant.desc}</div>

                    <div class="item">
                        类型：<span class="red">${plantTypeList[plant.type]}</span>
                    </div>

                    <div class="item">
                        生命：<span class="red">${plant.maxHp}</span>
                    </div>

                    ${plant.atk ? `
                        <div class="item">
                            攻击：<span class="red">${plant.atk}${plant.isAoeDamage ? '(范围伤害)' : ''}</span>
                        </div>
                        <div class="item">
                            攻击间隔：<span class="red">${plant.interval}(毫秒)</span>
                        </div>
                    ` : ''}

                    ${plant.hitRate ? `
                        <div class="item">
                            命中率：<span class="red">${plant.hitRate * 100}%</span>
                        </div>
                    ` : ''}
                    
                    ${plant.skill ? `
                        <div class="item">
                            特殊技能：<span class="red">${plant.skill[0].nameStr}</span>
                        </div>
                        <div class="item">
                            <span class="red">${plant.skill[0].desc}</span>
                        </div>
                    ` : ''}

                    ${plant.sun ? `
                        <div class="item">
                            阳光生产效率：<span class="red">${plant.sun}</span>
                        </div>
                    ` : ''}

                    ${plant.money ? `
                        <div class="item">
                            金钱生产效率：<span class="red">${plant.money}</span>
                        </div>

                        <div class="item">
                            金钱生产概率：<span class="red">${plant.moneyProbability * 100}%</span>
                        </div>
                    ` : ''}

                    ${plant.sleep ? `
                        <div class="item">
                            是否在白天休眠：<span class="red">是</span>
                        </div>
                    ` : ''}

                    <div class="item">
                        种植位置：<span class="red">${plant.location}(越大则越靠前)</span>
                    </div>

                </div>
            </div>
        </body>
        </html>
    `
    return HTML
}

export { 
    renderGoodsHTML, 
    renderItemsHTML, 
    renderEquipmentHTML, 
    renderUserLevelHTML, 
    renderUserLogHTML, 
    renderRankingHTML, 
    renderTombstoneHTML,
    renderBattleLogHTML, 
    renderBattleConfirmHTML,
    renderPlantInfoHTML,
}
